<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="list">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
        <li>09</li>
        <li>10</li>
    </ul>
</body>
<script>
    // 扩展运算符(...)   常用于展开数组(可遍历结构(伪数组,字符串,Set,Map))和对象

    // 展开数组  =>  将数组展开为用逗号分隔的参数序列

    // 作用:
    // (1)  将数组中的元素依次放到函数中, 作为函数的参数
    // (2)  将数组中的元素依次放到其他数组中, 作为数组的元素  a. 数组浅拷贝  b. 数组和并
    // (3)  伪数组转真数组 / 字符串分隔  => 可遍历结构


    // var list = [1, 4, 7, 2, 5, 8, 3, 6, 9];
    // console.log(list);

    // ...list => 1, 4, 7, 2, 5, 8, 3, 6, 9
    // console.log(...list);
    // console.log(1, 4, 7, 2, 5, 8, 3, 6, 9);

    //  (1)  将数组中的元素依次放到函数中, 作为函数的参数
    var list = [1, 4, 7, 2, 5, 8, 3, 6, 9];
    var max = Math.max(...list);
    console.log(max);


    // (2)  将数组中的元素依次放到其他数组中

    // a. 数组浅拷贝
    var list = [1, 4, 7, 2, 5, 8, 3, 6, 9];
    var arr = [...list]; // [1, 4, 7, 2, 5, 8, 3, 6, 9]
    console.log(arr, list, arr === list);

    //  b. 数组和并
    var arr = [1,2,3];
    var brr = [4,5,6];
    var crr = [...arr,...brr];
    console.log(crr);

    // (3) 伪数组转真数组
    var liList = document.querySelectorAll(".list li");
    var arr = [...liList];
    console.log(arr,Array.isArray(arr));

    var str = "hello";
    var arr = [...str];
    console.log(arr);






</script>

</html>